<template>
  <div class="user">
    <el-row :gutter="20">
      <el-col :span="5"
        ><el-input v-model="phone" placeholder="请输入管理员账号"></el-input
      ></el-col>
      <el-col :span="5"
        ><el-input v-model="email" placeholder="请输入管理员邮箱"></el-input
      ></el-col>
      <el-col :span="5"
        ><el-select v-model="form" placeholder="全部">
          <el-option label="全部" value=""></el-option>
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="2"></el-option>
        </el-select>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button type="primary" plain @click="seach">搜索</el-button></el-col
      >
      <el-col :span="2" :offset="1">
        <el-button type="primary" plain @click="getReset"
          >重置</el-button
        ></el-col
      >
      <el-col :span="2" :offset="1">
        <el-button type="primary" plain @click="getCreate"
          >创建用户</el-button
        ></el-col
      >
    </el-row>
    <!-- 表单 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="管理员ID"> </el-table-column>
      <el-table-column prop="username" label="管理员姓名"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="email" label="管理员邮箱"> </el-table-column>
      <el-table-column prop="" label="管理员头像">
        <template slot-scope="{ row }">
          <el-avatar
            :src="`http://122.51.249.55:7005/${row.avatar}`"
          ></el-avatar> </template
      ></el-table-column>

      <el-table-column prop="" label="管理员角色">
        <template slot-scope="{ row }">
          <el-button
            type="success"
            size="mini"
            v-for="(item, index) in row.role_name_str.split(',')"
            :key="index"
            plain
            disabled
            >{{ item }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="添加时间"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="{ row }">
          <el-switch
            :value="row.status === 1"
            @change="getManagement(row.id, row.status)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch></template
      ></el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="getEditor(row.id, row.role_name_str)"
            circle
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="getDelete(row.id)"
          ></el-button> </template
      ></el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-col :span="4" :offset="17">
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="page.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 弹窗 -->
    <el-dialog title="添加管路员" :visible="showDialog" @close="btnCancel">
      <el-form
        ref="roleForm"
        :model="roleForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="管理员名称" prop="username">
          <el-input
            placeholder="请输入管理员姓名"
            v-model="roleForm.username"
          />
        </el-form-item>
        <el-form-item label="管理员邮箱" prop="email">
          <el-input placeholder="请输入管路员邮箱" v-model="roleForm.email" />
        </el-form-item>
        <el-form-item label="管理员密码" prop="password">
          <el-input
            placeholder="请输入管理员密码"
            v-model="roleForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="管理员手机" prop="phone">
          <el-input
            placeholder="请输入管理员手机号"
            v-model="roleForm.phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="管理员状态">
          <el-switch
            :value="roleForm.status === 1"
            active-text="启用"
            inactive-text="禁用"
            @change="bb"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="管理员头像">
          <Potos @tupain="huoquxiang"></Potos>
        </el-form-item>
        <el-form-item label="管理员角色">
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 弹窗 -->
  </div>
</template>

<script>
import Potos from "./components/potos.vue";
import {
  getUser,
  getManagement,
  getSearch,
  getEditor,
  getDelete,
  getPermissions,
  getUserModify,
  getAddUserModify,
  getPicture,
} from "@/api/permission";
export default {
  name: "User",
  components: {
    Potos,
  },
  data() {
    return {
      total:'',
      touxiang: "",
      id: "",
      fileList: [],
      data: [],
      defaultProps: {
        children: "children",
        label: "role_name",
      },
      phone: "",
      email: "",
      form: "",
      roleid_list: [],
      showDialog: false,
      roleForm: {
        username: "",
        email: "",
        password: "",
        phone: "",
        status: 2,
      },

      user: {
        username: "",
        status: "",
        email: "",
        page: 1,
        limit: 5,
      },
      page: {
        role_name: "",
        page: 1,
        limit: 5,
      },
      tableData: [],
      rules: {
        username: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
        email: [
          { required: true, message: "内容不能为空", trigger: "blur" },
          {
            pattern:
              /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/,
            message: "邮箱格式不正确",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "内容不能为空", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.handleSizeChange()
    this.getUser();
    this.getPermissions();
   
  },
  methods: {
    // 头像
    huoquxiang(val) {
      // console.log(val);
      this.touxiang = val;
    },
    // 权限
    async getPermissions() {
      const str = await getPermissions();
      this.data = str.list;

      console.log(this.data);
    },
    bb() {
      this.roleForm.status = this.roleForm.status === 1 ? 2 : 1;
    },
    // 搜索
    async seach() {
      const str = {
        username: this.username,
        status: this.form,
        email: this.email,
        page: 1,
        limit: 5,
      };
      const data = await getSearch(str);
      //  console.log(data);
      this.tableData = data.list;
      // console.log(this.form);
    },
    // 修改状态
    async getManagement(id, value) {
      const status = value === 1 ? 2 : 1;

      await getManagement(id, status);
      this.getUser();
    },
    async handleSizeChange(val) {
      console.log(val);
      const user = {
        username: "",
        status: "",
        email: "",
        page: 1,
        limit: val,
      };
      const data = await getUser(user);
      this.tableData = data.list;
      this.total=data.total
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 获取数据
    async getUser() {
      const data = await getUser(this.user);
      this.tableData = data.list;

      // console.log(this.tableData[4].role_name_str.split(","));
    },
    // 重置
    getReset() {
      this.getUser();
    },
    // 创建用户
    getCreate() {
      this.showDialog = true;
      this.roleForm = {
        username: "",
        email: "",
        password: "",
        phone: "",
        status: 2,
      };
    },
    // 添加
    async btnOK() {
      if (!this.id) {
        try {
          this.roleid_list = this.$refs.tree.getCheckedKeys();
          const data = {
            avatar: this.touxiang,
            email: this.roleForm.email,
            password: this.roleForm.password,
            phone: this.roleForm.phone,
            roleid_list: this.roleid_list,
            status: this.roleForm.status,
            username: this.roleForm.username,
          };
          await getAddUserModify(data);
          this.$message.success("添加成功");
          this.getUser();
        } catch (error) {
          this.$message.error("添加失败");
        }
      } else {
        try {
          this.roleid_list = this.$refs.tree.getCheckedKeys();
          const data = {
            avatar: this.touxiang,
            email: this.roleForm.email,
            password: this.roleForm.password,
            phone: this.roleForm.phone,
            roleid_list: this.roleid_list,
            status: this.roleForm.status,
            username: this.roleForm.username,
            id: this.id,
          };
          const key = this.id;
          await getUserModify(key, data);
          this.$message.success("添加成功");
        } catch (error) {
          this.$message.error("添加失败");
        }
      }
    },
    btnCancel() {
      this.showDialog = false;
      this.checkedCities = [];
    },

    // 编辑
    async getEditor(id, name) {
      this.id = id;
      this.showDialog = true;
      const data = await getEditor(id);
      this.roleForm.username = data.username;
      this.roleForm.email = data.email;
      this.roleForm.phone = data.phone;
      this.roleForm.status = data.status;
      this.checkedCities.push(name);
      // console.log(this.checkedCities);
    },
    // 删除
    getDelete(id) {
      this.$confirm("此操作将永久删除该管理员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await getDelete(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<stylez scoped>
.user {
  padding: 20px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
